/*
 * @Author: puhuaping
 * @Date: 2020-04-13 16:56:23
 */
<style lang="less" scoped>
.merchant-list {
  .btnBox {
    text-align: right;
  }
  .ivu-btn-small {
    padding: 1px 7px;
  }
  .ivu-btn {
    margin: 0 3px;
  }
}
.model-wrap .ivu-form-item {
  margin-bottom: 10px;
}
.flex-table {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px 0;
}
</style>
<template>
  <div class="merchant-list">
    <Card :bordered="true">
      <Form :label-width="60" inline style="margin-bottom:10px">
        <FormItem label="订单ID">
          <Input
            type="text"
            clearable
            v-model="formSearch.orderDetailId"
            style="width: 180px"
            placeholder="请输入订单ID"
          />
        </FormItem>
        <FormItem label="商品名">
          <Input
            type="text"
            clearable
            v-model="formSearch.goodsName"
            style="width: 180px"
            placeholder="请输入商品名称"
          />
        </FormItem>
        <FormItem label="用户名">
          <Input
            type="text"
            clearable
            v-model="formSearch.userName"
            style="width: 180px"
            placeholder="请输入用户名"
          />
        </FormItem>
        <FormItem label="联系方式">
          <Input
            type="text"
            clearable
            v-model="formSearch.userMobile"
            style="width: 180px"
            placeholder="请输入联系方式"
          />
        </FormItem>
        <FormItem label="支付方式">
          <Select clearable v-model="formSearch.paymentType" style="width:180px">
            <Option value>全部</Option>
            <Option value="WAIT_AUDIT">爱豆支付</Option>
            <Option value="AUDIT_PASS">微信支付</Option>
          </Select>
        </FormItem>
        <FormItem label="售后状态">
          <Select clearable v-model="formSearch.afterSalesState" style="width:180px">
            <Option value>全部</Option>
            <Option value="AFTERSALES_WAIT_AUDIT">待审核</Option>
            <Option value="AFTERSALES_RETRUN_PROCESS">已通过</Option>
            <Option value="AFTERSALES_FINISHEDD">已完成</Option>
            <Option value="AFTERSALES_REFUSE">已拒绝</Option>
          </Select>
        </FormItem>
        <Button type="primary" @click="handleSearch()">查询</Button>
        <Button type="success" @click="lookALL()">查看全部</Button>
      </Form>
      <!-- 表格 -->
      <tables
        ref="tables"
        :columns="columns"
        search-place="top"
        :searchBtn="false"
        v-model="tableData"
        :page="page"
        :handleChange="handleChange"
      />
    </Card>
    <Modal :mask-closable='false' v-model="showModel" title="售后-拒绝" width="300" @on-visible-change="changeModel">
      <Form
        ref="formSubmitRef"
        :model="formSubmitData"
        :rules="formSubmitRule"
        class="model-wrap"
        label-position="left"
      >
        <FormItem label prop="remark">
          <Input type="textarea" placeholder="请输入拒绝原因" :rows="4" v-model="formSubmitData.remark" />
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="default" @click="showModel=false">取消</Button>
        <Button type="primary" @click="sureModel">确定</Button>
      </div>
    </Modal>
    <Modal :mask-closable='false' v-model="model1" title="查看凭证" width="340">
      <!-- <img style="width:100%" :src="curRowData&&curRowData.idcardBack" alt /> -->
      <div slot="footer">
        <Button type="default" @click="model1=false">取消</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
import Tables from "@/components/tables/tables.vue";
import { requestData, getData } from "@/api/data";
import { setToken, getToken } from "@/libs/util";
import { isNumber } from "@/tool/validator";
import config from "@/config";
const baseUrl =
  process.env.NODE_ENV === "development"
    ? config.baseUrl.dev
    : config.baseUrl.pro;
export default {
  name: "authentication",
  components: {
    Tables
  },
  data() {
    return {
      model1: false,
      danhao: 1,
      showModel: false,
      page: {},
      tableData: [],
      curRowData: null,
      formSubmitRule: {
        remark: [
          {
            required: true,
            message: "请输入原因",
            trigger: "blur"
          }
        ]
      },
      formSubmitData: {
        remark: ""
      },
      formSearch: {
        afterSalesState: "",
        goodsName: "",
        orderDetailId: "",
        paymentType: "",
        userMobile: "",
        userName: ""
      },
      columns: [
        {
          title: "订单id",
          key: "id",
          minWidth: 100,
          align: "center"
        },
        {
          title: "商品名称",
          align: "center",
          key: "itemName",
          minWidth: 140,
          render: (h, params) => {
            return h("span", params.row.orderDetail.goodsName);
          }
        },
        {
          title: "规格",
          align: "center",
          key: "itemPrice",
          minWidth: 100,
          render: (h, params) => {
            return h("span", params.row.orderDetail.parentOrder.skuName);
          }
        },
        {
          title: "数量",
          align: "center",
          key: "itemPrice",
          minWidth: 80,
          render: (h, params) => {
            return h("span", params.row.orderDetail.count);
          }
        },
        {
          title: "用户姓名",
          align: "center",
          key: "userName",
          minWidth: 100,
          render: (h, params) => {
            return h("span", params.row.orderDetail.parentOrder.userName);
          }
        },
        {
          title: "联系方式",
          align: "center",
          key: "userMobile",
          minWidth: 100,
          render: (h, params) => {
            return h("span", params.row.orderDetail.parentOrder.userMobile);
          }
        },
        {
          title: "价格",
          align: "center",
          key: "userMobile",
          minWidth: 80,
          render: (h, params) => {
            return h("span", params.row.orderDetail.parentOrder.goodsAmount);
          }
        },
        {
          title: "支付方式",
          align: "center",
          key: "idouBalance",
          minWidth: 100,
          render: (h, params) => {
            return h(
              "span",
              params.row.orderDetail.parentOrder.paymentType == "WECHAT"
                ? "微信支付"
                : "爱豆支付"
            );
          }
        },
        {
          title: "下单时间",
          align: "center",
          key: "subscribeTime",
          minWidth: 100,
          render: (h, params) => {
            return h("span", params.row.orderDetail.goodsName);
          }
        },
        {
          title: "售后状态",
          align: "center",
          key: "state",
          minWidth: 100,
          render: (h, params) => {
            let text = {
              AFTERSALES_WAIT_AUDIT: "待审核",
              AFTERSALES_REFUSE: "已拒绝",
              AFTERSALES_RETRUN_PROCESS: "已通过",
              AFTERSALES_FINISHED: "已完成"
            }[params.row.state];
            return h("span", text);
          }
        },
        {
          title: " ",
          align: "center",
          key: ""
        },
        {
          title: "操作",
          align: "center",
          width: 200,
          fixed: "right",
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  attrs: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.model1 = true;
                    }
                  }
                },
                "查看凭证"
              ),
              h(
                "Button",
                {
                  attrs: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    display:
                      params.row.state == "AFTERSALES_WAIT_AUDIT"
                        ? "inline-block"
                        : "none",
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      let dataObj = {
                        id: params.row.id,
                        pass: true
                      };
                      this.$Modal.confirm({
                        title: "售后-通过",
                        width: "300",
                        content: "是否确认通过售后？",
                        onOk: () => {
                          requestData(
                            "/admin/mall/orderAfterSales/audit",
                            "post",
                            dataObj
                          ).then(res => {
                            if (res.data.code == 0) {
                              this.$Message.success("操作成功");
                              this.getListData();
                            } else {
                              this.$Message.error(res.data.msg);
                            }
                          });
                        }
                      });
                    }
                  }
                },
                "通过"
              ),
              h(
                "Button",
                {
                  attrs: {
                    type: "error",
                    size: "small"
                  },
                  style: {
                    display:
                      params.row.state == "AFTERSALES_RETRUN_PROCESS"
                        ? "inline-block"
                        : "none"
                  },
                  on: {
                    click: () => {
                      let dataObj = {
                        id: params.row.id,
                        pass: true
                      };
                      this.$Modal.confirm({
                        title: "售后-完成",
                        width: "300",
                        content:
                          "提示：完成后系统将费用原路退还给用户，是否确认进行完成操作？",
                        onOk: () => {
                          requestData(
                            "/admin/mall/orderAfterSales/audit",
                            "post",
                            dataObj
                          ).then(res => {
                            if (res.data.code == 0) {
                              this.$Message.success("操作成功");
                              this.getListData();
                            } else {
                              this.$Message.error(res.data.msg);
                            }
                          });
                        }
                      });
                    }
                  }
                },
                "完成"
              ),
              h(
                "Button",
                {
                  attrs: {
                    type: "error",
                    size: "small"
                  },
                  style: {
                    display:
                      params.row.state == "AFTERSALES_WAIT_AUDIT"
                        ? "inline-block"
                        : "none"
                  },
                  on: {
                    click: () => {
                      this.curRowData = params.row;
                      this.showModel = true;
                    }
                  }
                },
                "拒绝"
              )
            ]);
          }
        }
      ]
    };
  },
  methods: {
    //model确定
    sureModel() {
      this.$refs.formSubmitRef.validate(valid => {
        if (valid) {
          const curRowData = this.curRowData;
          let dataObj = {
            id: curRowData.id,
            remark: this.formSubmitData.remark,
            pass: false
          };
          requestData(
            "/admin/mall/orderAfterSales/audit",
            "post",
            dataObj
          ).then(res => {
            if (res.data.code == 0) {
              this.$Message.success("操作成功");
              this.showModel = false;
              this.getListData();
            } else {
              this.$Message.error(res.data.msg);
            }
            this.showModel = false;
          });
        }
      });
    },
    //模态框改变
    changeModel(e) {
      if (!e) {
        this.curRowData = null;
      }
    },
    lookALL() {
      let formSearch = this.formSearch;
      for (let i in formSearch) {
        formSearch[i] = "";
      }
      this.formSearch = formSearch;
      this.indexPage = 1;
      this.getListData();
    },
    handleSearch() {
      this.indexPage = 1;
      this.getListData();
    },
    //获取分页
    handleChange(e) {
      this.indexPage = e;
      this.getListData();
    },
    getListData() {
      const dataObj = Object.assign(
        {
          page: this.indexPage,
          max: 10
        },
        this.formSearch
      );
      requestData("/admin/mall/orderAfterSales", "get", dataObj).then(res => {
        if (res.data.code == 0) {
          const { pageNumber, totalPage, totalRow } = res.data.page;
          this.page = {
            pageNumber: pageNumber,
            totalPage,
            totalRow: totalRow
          };
          this.tableData = res.data.data || [];
        } else {
          this.$Message.error(res.data.msg);
        }
      });
    }
  },
  mounted() {
    this.getListData();
  }
};
</script>
